<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录页面</title>
  <link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" rel="stylesheet"/>
  <link rel="stylesheet" href="../styles/style_login_register.css">
</head>
<body>
<div id="page" class="site">
  <div class="container">
    <div class="Auth">
      <div class="left">
        <h1>认证页面 For Denselin</h1>
        <h5>如果您没有账户<br>您可以 <a href="../pages/register.html">在这里注册</a></h5>
      </div>
      <div class="main" id="authSection">
        <div id="message"></div>
        <form id="loginForm">
          <div class="form-group">
            <input type="text" name="username" placeholder="您的用户名" required>
          </div>
          <div class="form-group password">
            <input type="password" name="password" placeholder="您的密码" required>
          </div>
          <div class="form-group">
            <button type="button" onclick="submitLogin()">登录</button>
          </div>
        </form>
      </div>
      <div class="options">
        <div class="separator">
          <p>或与其他账户登录</p>
        </div>
        <ul>
          <li><a href="#"><i class="ri-wechat-fill ri-2x"></i></a></li>
          <li><a href="#"><i class="ri-qq-fill ri-2x"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<script>
  // 获取 URL 参数
  function getQueryParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
  }

  // 自动填充用户名和密码
  window.onload = function() {
    const username = getQueryParam('username');
    const password = getQueryParam('password');

    if (username) document.querySelector('[name="username"]').value = username;
    if (password) document.querySelector('[name="password"]').value = password;
  };

  function submitLogin() {
    const form = document.getElementById('loginForm');
    const username = form.username.value.trim();
    const password = form.password.value.trim();

    if (!username || !password) {
      alert('请填写所有字段。');
      return;
    }
    fetch('/login', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({username, password}),
    })
            .then(response => {
              if (!response.ok) {
                // 如果响应不正常则抛出错误
                throw new Error('登录失败：' + response.statusText);
              }
              return response.json(); // 假设后端返回的是JSON，如果返回的是文本类型，可以改为 response.text()
            })
            .then(data => {
              // 登录成功后，假设后端返回的data中有一个success字段
              if (data.success) {
                // 跳转到主页面
                window.location.href = '/pages/main.html'; // 替换为您要跳转的页面地址
              } else {
                alert(data.message || '登录失败，请重试。'); // 显示错误信息
              }
            })
            .catch(error => {
              alert(error.message || '登录失败，请重试。');
            });
  }


</script>
</body>
</html>